<template>
  <div class="item-one" ref="itemOne">
    <div class="title">
      <span>全部菜单</span>
      <div>
        <el-button type="primary" @click="addmeun">新建菜单</el-button>
        <el-button icon="el-icon-refresh" @click="refresh"></el-button>
      </div>
    </div>
    <div class="container">
     
      <div class="tableBox">
        <div class="tree-title">
          <p class="is-leaf el-tree-node__expand-icon el-icon-caret-right">&emsp;</p>
          <span>名称</span>
          <span>链接</span>
          <span>展开</span>
          <span>有效</span>
          <span>排序</span>
          <span>操作</span>
        </div>
        <el-tree 
        ref="menuTree"
        :data="merchantarr" 
        node-key="id" 
        :props="defaultProps" 
        @node-click="handleNodeClick" 
        accordion
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>{{ data.index }}</span>
            <span>{{ data.isExpand == 1 ? '是' : '否' }}</span>
            <span>{{ data.isEnable == 1 ? '是' : '否' }}</span>
            <span>{{ data.sortCode }}</span>
            <span ref="btnBox">
              <el-button
                type="text"
                size="mini"
                @click="() => updata(node, data)">
                修改
              </el-button>
              <el-button
                v-if="data.isEnable == 1"
                type="text"
                size="mini"
                @click="() => deletes(node, data)">
                停用
              </el-button>
              <el-button
                v-if="data.isEnable == 0"
                type="text"
                size="mini"
                @click="() => meunenable(node, data)">
                启用
              </el-button>
            </span>
          </span> 
        </el-tree>
      </div>
      <br>
      <br>
       <!-- 新建菜单 -->
      <el-dialog v-dialogDrag title="新建菜单" :visible.sync="eqma" width="45%">
        <el-form
          :model="menuinfo"
          status-icon
          ref="menuinfo"
          label-width="110px"
          class="demo-dynamic"
        >
          <el-form-item label="上级" >
            <el-select
              class="main-select-tree"
              ref="menulTree"
              v-model="menuinfo.menuid"
              style="width: 300px;"
            >
              <el-option
                v-for="(item, index) in menuArr"
                :key="index"
                keys="2"
                :label="item.title"
                :value="item.id"
                style="display: none;"
                />

              <el-tree 
                class="main-select-el-tree"
                ref="menulTree"
                :data="menulists"
                :props="defaultProps"
                highlight-current
                :default-expand-all="isexpandeallTree"
                @node-click="menuTreeClick"
                :expand-on-click-node="expandOnClickNode"
              />
            </el-select>
            
          </el-form-item>
          <el-form-item label="名称" >
           <el-input type="text" v-model="menuinfo.title" placeholder="请输入菜单名称" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="链接">
            <el-input type="text" v-model="menuinfo.index" placeholder="请输入链接地址" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="排序">
            <el-input type="number" v-model="menuinfo.sortCode"  placeholder='请输入排序' autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="eqma = false">取消</el-button>
          <el-button type="primary" @click="menuysave()">确定</el-button>
        </span>
      </el-dialog>
      <!-- 修改菜单 -->
      <el-dialog v-dialogDrag title="修改菜单" :visible.sync="updatameun" width="45%">
        <el-form
          :model="menuinfo"
          status-icon
          ref="menuinfo"
          label-width="110px"
          class="demo-dynamic"
        >
          <el-form-item label="上级" >
            <el-select
              class="main-select-tree"
              ref="menulTree"
              v-model="menuinfo.menuid"
              style="width: 300px;"
            >
              <el-option
                v-for="(item, index) in menuArr"
                :key="index"
                keys="2"
                :label="item.title"
                :value="item.id"
                style="display: none;"
                />

              <el-tree 
                class="main-select-el-tree"
                ref="menulTree"
                :data="menulists"
                :props="defaultProps"
                highlight-current
                :default-expand-all="isexpandeallTree"
                @node-click="menuTreeClick"
                :expand-on-click-node="expandOnClickNode"
              />
            </el-select>
          
          </el-form-item>
          <el-form-item label="名称" >
           <el-input type="text" v-model="menuinfo.title" placeholder="请输入菜单名称" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="链接">
            <el-input type="text" v-model="menuinfo.index" placeholder="请输入链接地址" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="排序">
            <el-input type="number" v-model="menuinfo.sortCode"  placeholder='请输入排序' autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="updatameun = false">取消</el-button>
          <el-button type="primary" @click="menuupdate()">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { menupage, menulist,getNodeMenu, menuysave,meundelete,meunenable,getAllMenu,menuupdate } from "@/api/api";
export default {
  name: "item-one",
  data: function() {
    return {
      visible: false,
      merchantarr: [],
      eqma: false,
      updatameun: false,
      menuinfo:{
        menuid:"",
        title:"",
        index:"",
        sortCode:"",
        meunid:""
      },
      menulists: [],
      menuArr: [],
      expandOnClickNode: false,
      isexpandeallTree: true,
      defaultProps: {
        children: 'subs',
        label: 'title'
      },
      Switch: false
    };
  },
  created() {
    this.$store.dispatch("getNewNum", 6);
    // console.log(this.$store.state.changableNum);
    // console.log(this.$store.state.showFooter);
    // console.log(this.$store.state.logininfo);
    this.menulist();
  },
  methods: {
     //修改thead 背景色
     tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;'
      }
    },
    handleNodeClick(data, node, e) {
      if(this.isSwitch) {
        node.expanded = !node.expanded
        this.isSwitch = false
      }
    },
    // 打开新增菜单
    addmeun(){
      this.getNodeMenu()
      this.eqma = true
      this.menuinfo.menuid = '',
      this.menuinfo.title = '',
      this.menuinfo.index = '',
      this.menuinfo.sortCode = ''
    },
    // 刷新
    refresh() {
      this.$router.go({
        path: 0,
        query: {
          t: Date.now()
        }
      })
    },
    //多选框
    handleSelectionChange(val) {
      console.log(val);
    },
    // 节点列表
    getNodeMenu(){
      getNodeMenu({}).then(res => {
        // console.log(res);
        this.menulists = [{
          title: '根节点',
          id: 0,
          subs: res.data
        }]
        this.menuArr = []
        this.menuArr.push({
          title: '根节点',
          id: 0
        })
        res.data.forEach(item => {
          this.menuArr.push({
            title: item.title,
            id: item.id
          })
          if(item.subs.length > 0) {
            for(let i = 0; i < item.subs.length; i++){
              this.menuArr.push({
                title: item.subs[i].title,
                id: item.subs[i].id,
              })
            }
          }
        })
      });
    },
    menuTreeClick (node) {
      this.menuinfo.menuid = node.id
      this.$refs.menulTree.blur()
    },
    // 菜单列表
    menulist(level) {
      menulist({
      }).then(res => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage. removeItem("token");
          this.$router.push("/login");
        } else {
          this.merchantarr = res.data
        }
      });
    },
    // addmeun
    menuysave(){
      this.eqma = false;
      // console.log(this.menuinfo)
      menuysave({
        parentId:this.menuinfo.menuid,
        title:this.menuinfo.title,
        index:this.menuinfo.index,
        sortCode:this.menuinfo.sortCode
      }).then(res => {
        console.log(res)
        if(res.code == 200){
           this.$message({
            message: '添加成功',
            type: 'success'
          });
        }else{
          this.$message.error(res.message);
        }
      });
    },
    // 修改meun
    menuupdate(){
      menuupdate({
        parentId:this.menuinfo.menuid,
        title:this.menuinfo.title,
        index:this.menuinfo.index,
        sortCode:this.menuinfo.sortCode
      },this.meunid).then(res => {
        console.log(res)
        if(res.code == 200){
           this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.menulist()
          this.getAllMenu()
          this.updatameun = false
        }else{
          this.$message.error(res.message);
        }
      });
    },
    // 停用meun
    deletes(node, data){
      this.isSwitch = true
       meundelete({
       
      },data.id).then(res => {
        console.log(res)
        if(res.code == 200){
           this.$message({
            message: '已停用',
            type: 'success'
          });
          this.getAllMenu()
          this.refresh()
        }else{
          this.$message.error(res.message);
        }
      });
    },
    // 启用meun
    meunenable(data){
      this.isSwitch = true
       meunenable({
      },data.data.id).then(res => {
        console.log(res)
        if(res.code == 200){
           this.$message({
            message: '已启用',
            type: 'success'
          });
          this.getAllMenu()
          this.refresh()
        }else{
          this.$message.error(res.message);
        }
      });
    },
    // 更新菜单
    getAllMenu(){
       let userinfo = JSON.parse(sessionStorage.getItem('userInfo'))
      getAllMenu({
        roleId:userinfo.rolesId
      }).then(res => {
        sessionStorage.setItem('menuList',JSON.stringify(res.data))
      });
    },
    // 修改meun
    updata(node, data){
      this.isSwitch = true
      this.getNodeMenu()
      this.updatameun = true
      this.meunid = data.id
      this.menuinfo.menuid = data.parentId
      this.menuinfo.title = data.title
      this.menuinfo.index = data.index
      this.menuinfo.sortCode = data.sortCode
    },
  }
};
</script>
<style lang="less">
.hiddenSel{
  display: none;
}
</style>
<style scoped lang='less'>
.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.custom-tree-node{
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}
.custom-tree-node > span {
  flex: 1;
  text-align: center;
  font-size: 12px;
}
/deep/.el-tree-node__content{
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #f0f0f0;
}
.tableBox{
  width: 100%;
}
.tree-title {
  display: flex;
  justify-content: space-evenly;
  padding: 10px 0;
  background-color: #f0f0f0;
  font-weight: 500;
}
.tableBox .tree-title > span {
  flex: 1;
  text-align: center;
}
.name {
  width: 25%;
}
.screeningBox {
  width: 100%;
  display: flex;
}
.leftBox,
.rightBox {
  width: 50%;
  padding: 0 15px;
  box-sizing: border-box;
}
.leftBox > .leftitem {
  margin-bottom: 15px;
}
.rightBox > .rightitem {
  margin-bottom: 15px;
}
.merchants {
  width: 50%;
}
.tableBox {
  margin-top: 20px;
}
.servicename {
  width: 60%;
}
.servicelevel {
  width: 20%;
}
.width20 {
  width: 20%;
}
.red {
  color: #f9607d;
}
.blue {
  color: #01aaef;
}
.stitle {
  padding: 5px 0;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  i {
    margin-left: 10px;
    margin-right: 5px;
  }
  .swarning {
    color: red;
  }
  .warning {
    color: #f9607d;
  }
}

</style>